<%--
  Created by IntelliJ IDEA.
  User: xinlong
  Date: 2017/10/31
  Time: 19:45
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增/修改景点页</title>
    <%@include file="/resources/common/head.jsp" %>
    <%@include file="/resources/common/product-head.jsp" %>
    <script src="/resources/script/wetravel.js" type="text/javascript"></script>
    <script src="/resources/css/wetravel.css" type="text/css"></script>
    <style type="text/css">
        .container_div{
            width: 95%;
        }
    </style>
    <script type="text/javascript">
        //获取子节点的信息
        function getCategory(categoryId){
            var status = 0;
            var data;
            var msg;
            //发送请求
            $.ajax({
                type:"post",
                url:"/manage/category/get_category.do",      // 这里是提交到什么地方的url
                data:{categoryId:categoryId},            // 这里把表单里面的数据放在这里传到后台
                dataType:"json",
                async: false,       //设置ajax请求为同步，防止发送请求后执行success代码异常
                success:function(res){
                    if(res.status==1){
                        status = 1;
                        data = res.data;
                    }else {
                        msg = res.msg;
                    }
                },
                error:function(res){
                    if(res.status==1){
                        status = 1;
                        data = res.data;
                    }else {
                        msg = res.msg;
                    }
                }
            });
            if(status == 1){
                console.log("获取子节点信息成功");
            }else {
                console.log("获取子节点信息失败："+msg);
            }
            return data;
        }

    </script>
</head>
<body>
<div class="container_div">
    <form id="login" class="form-horizontal" action="/manage/scenic_spot/save.do" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">商品类别</label>
            <div class="col-sm-4">
                <select id="first-order" class="form-control">
                    <option>北京</option>
                    <option>上海</option>
                    <option>福建</option>
                    <option>广东</option>
                </select>
            </div>
            <div class="col-sm-4">
                <select id="second-order" name="categoryId" class="form-control">
                    <option value="100003">西城</option>
                    <option value="100004">朝阳</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="theme">景点主题</label>
            <div class="col-sm-8" id="theme">
                <c:forEach items="${requestScope.categoryList}" var="category" varStatus="status">
                    <label class="radio-inline">
                        <input type="radio" name="theme" value="${category.id}">${category.name}
                    </label>
                </c:forEach>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="name">景点名称</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="name" name="name" placeholder="Name"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="subtitle">景点副标题</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="subtitle" name="subtitle" placeholder="Subtitle"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">主图</label>
            <div class="col-sm-8">
                <label class="control-label">默认为子图的第一张图</label>
                <input type="hidden" name="mainImage" id="mainImage"/>
                <!-- <input type="text" class="form-control" id="mainImage" name="mainImage" placeholder="main image"/> -->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="subImage">子图</label>
            <div class="col-sm-8">
                <input type="hidden" name="subImage" id="subImage"/>
                <!-- 这段代码是展示dropzone.js的精髓 -->
                <div id="subImageDropz" class="dropzone"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="address">具体地址</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="address" name="address" placeholder="address"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="openTime">开放时间</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="openTime" name="openTime" placeholder="open time"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="openTimeDetail">开放时间细节</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="openTimeDetail" name="openTimeDetail" placeholder="open time detail" rows="7"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="specialCrowdPolicy">特殊人群政策</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="specialCrowdPolicy" name="specialCrowdPolicy" value="身高1米以下免票（需由一名成人陪同）；
1-1.4米之间购儿童票 半价；
60周岁（包含60）以上持身份证购老人票 半价。" placeholder="身高1米以下免票（需由一名成人陪同）；
1-1.4米之间购儿童票 半价；
60周岁（包含60）以上持身份证购老人票 半价。" rows="4"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="bookingToRemind">预定提醒</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="bookingToRemind" name="bookingToRemind" value="请自觉遵守公共秩序，保持环境卫生，服从园内工作人员的引导。" placeholder="请自觉遵守公共秩序，保持环境卫生，服从园内工作人员的引导。" rows="3"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="otherRemind">温馨提醒</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="otherRemind" name="otherRemind" value="为保障游客的游玩安全，凡身高在1.4米（不含1.4米）以下的儿童或70周岁以上的老人必须有一名具有监护能力的成人陪同入园。" placeholder="为保障游客的游玩安全，凡身高在1.4米（不含1.4米）以下的儿童或70周岁以上的老人必须有一名具有监护能力的成人陪同入园。" rows="3"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="invoiceDescription">发票说明</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="invoiceDescription" name="invoiceDescription" value="如需发票，请致电wetravel客服，4000-999-999" placeholder="如需发票，请致电wetravel客服，4000-999-999" rows="3"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="refundOrChangeInstructions">退改规则</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="refundOrChangeInstructions" name="refundOrChangeInstructions" value="门票预定成功未验证取票，提前一天（以在下单时选定的日期为准）18点之前申请退票，全额退款；逾期收取20%手续费；门票一经验证，不可退改。门票指定出游日起30天内有效，有效期内仅限入园一次。
门票指定出游日起30天内有效，有效期内仅限入园一次。" placeholder="门票预定成功未验证取票，提前一天（以在下单时选定的日期为准）18点之前申请退票，全额退款；逾期收取20%手续费；门票一经验证，不可退改。门票指定出游日起30天内有效，有效期内仅限入园一次。
门票指定出游日起30天内有效，有效期内仅限入园一次。" rows="4"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="specialInformation">特殊信息</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="specialInformation" name="specialInformation" value="年卡说明：年卡为一名成人携带一名1.4米以下儿童，年卡仅限本人使用，仅限标注有效期内使用一次，丢失可凭身份证至窗口补办，购买年卡时需提供身份证，入园时需与身份证对应。" placeholder="年卡说明：年卡为一名成人携带一名1.4米以下儿童，年卡仅限本人使用，仅限标注有效期内使用一次，丢失可凭身份证至窗口补办，购买年卡时需提供身份证，入园时需与身份证对应。" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="introduce">景点介绍</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="introduce" name="introduce" placeholder="Balabala" autofocus></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="traffic">交通信息(公交线路)</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="traffic" name="traffic" placeholder="traffic" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="position">地址坐标</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="position" name="position" placeholder="position"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="status">状态</label>
            <div class="col-sm-8" id="status">
                <label class="radio-inline">
                    <input type="radio" name="status" id="inlineRadio1" value="1">在售
                </label>
                <label class="radio-inline">
                    <input type="radio" name="status" id="inlineRadio2" value="2">下架
                </label>
                <label class="radio-inline">
                    <input type="radio" name="status" id="inlineRadio3" value="3">删除
                </label>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <button id="commit" type="submit" class="btn btn-default">登录</button>
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    //初始化数据
    $(document).ready(function (){
        //初始化firstOrder数据
        var data =getCategory(0);
        var firstOrderHtml;
        if(data!=null){
            for(var i in data){
                firstOrderHtml+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
            }
            $("#first-order").html(firstOrderHtml);
        }
        //初始化secondOrder数据
        var categoryId = data[0].id;
        var data =getCategory(categoryId);
        var secondOrderHtml;
        if(data!=null){
            for(var i in data){
                secondOrderHtml+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
            }
            $("#second-order").html(secondOrderHtml);
        }

        //绑定firstOrder改变事件
        $("#first-order").change(function(){
            var data;
            data = getCategory($(this).val());
            var secondOrderHtml;
            if(data!=null){
                for(var i in data){
                    secondOrderHtml+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
                }
                $("#second-order").html(secondOrderHtml);
            }
        });
    });
</script>
<!-- 初始化simditor -->
<script type="text/javascript">
    //子图队列
    imgArr = new Array();
    fileArr = new Array();
    //dropzone插件初始化：subImage
    Dropzone.autoDiscover = false;//防止报"Dropzone already attached."的错误
    var myDropzone = new Dropzone("#subImageDropz", {
        url: "/manage/fileupload/richtext_img_upload.do",//文件提交地址
        method:"post",  //也可用put
        paramName:"upload_file", //默认为file
        maxFiles:10,//一次性上传的文件数量上限
        maxFilesize: 2, //文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
        addRemoveLinks:true,
        parallelUploads: 10,//一次上传的文件数量
        //previewsContainer:"#preview",//上传图片的预览窗口
        dictDefaultMessage:'拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传10个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
        dictFallbackMessage:"浏览器不受支持",
        dictFileTooBig:"文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init:function(){
            this.on("addedfile", function(file) {
                //上传文件时触发的事件
                //document.querySelector('div .dz-default').style.display = 'none';
            });
            this.on("success",function(file,data){
                //上传成功触发的事件
                console.log('ok');
                console.log(data.success);
                console.log(data.msg);
                console.log('test file.src');
                console.log(file.src);
                file.src=data.file_path;
                console.log(file.src);
                console.log(file.name);
                console.log(data.file_path);
                console.log(data.file_uri);
                imgArr.push(data.file_uri);
                fileArr.push(file);
                console.log(imgArr.join(","));
                $("#subImage").val(imgArr.join(","));
                $("#mainImage").val(imgArr[0]);
                //angular.element(appElement).scope().file_id = data.data.id;
            });
            this.on("error",function (file,data) {
                //上传失败触发的事件
                console.log('fail');
                console.log(data.msg);
                console.log(data.success);
                //var message = '';
                //lavarel框架有一个表单验证，
                //对于ajax请求，JSON 响应会发送一个 422 HTTP 状态码，
                //对应file.accepted的值是false，在这里捕捉表单验证的错误提示
//                if (file.accepted){
//                    $.each(data,function (key,val) {
//                        message = message + val[0] + ';';
//                    })
//                    //控制器层面的错误提示，file.accepted = true的时候；
//                    alert(message);
//                }
            });
            this.on("removedfile",function(file){
                //删除文件时触发的方法
//                var file_id = angular.element(appElement).scope().file_id;
//                if (file_id){
//                    $.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {
//                        console.log('删除结果:'+data.message);
//                    })
//                }
//                //angular.element(appElement).scope().file_id = 0;
//                document.querySelector('div .dz-default').style.display = 'block';
                console.log('removedfile');
                console.log('test file.src');
                console.log(file.src);
                console.log(file.name);
                for (var i=0;i<imgArr.length;i++){
                    if(fileArr[i] == file){
                        fileArr.splice(i,1);
                        imgArr.splice(i,1);
                    }
                }
                console.log(imgArr.join(","));
                $("#subImage").val(imgArr.join(","));
                $("#mainImage").val(imgArr[0]);
            });
        }
    });
    //simditor插件初始化
    var editor = new Simditor({
        textarea: $('#introduce'),
        //optional options
        placeholder: '',
        defaultImage: '/resources/images/image.png',
        params: {},
        upload: {
            url: '/manage/fileupload/richtext_img_upload.do',
            params:null,
            fileKey: 'upload_file',
            connectionCount: 3,
            leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
        },
        tabIndent: true,
        toolbar: true,
        toolbarFloat: true,
        toolbarFloatOffset: 0,
        toolbarHidden: false,
        pasteImage: false,
        cleanPaste: false
    });
</script>

</html>
